import React, {
    PureComponent
} from 'react';

import {
    View,
    TextInput,
    StyleSheet
} from 'react-native';

import {
    Tip,
    Input,
    Loading,
    Layout,
    Button,
} from './../../components';

interface Props {
    user:any,
    userActions:any
}

interface State {
    reason?:string,
    password?:string
}

import connect from './../../utils/connect';

import userAction from './../../state/actions/user';
import * as userTypes from './../../state/types/user';

@connect([`user`],{
    userActions: userAction
})
class DeleteAccount extends PureComponent <Props, State> {
    state = {
        reason: ``,
        password: ``
    }

    get loginUser () {
        const {
            user
        } = this.props;
        const {
            loginUser
        } = user;
        return loginUser || {}
    }

    get userActions() {
        const {
            userActions
        } = this.props;
        return userActions;
    }

    get isThirdPartyUser() {
        const {
            isThirdPartyUser
        }  = this.loginUser;
        return isThirdPartyUser;
    }

    private _onReasonChange = (text: string) => {
        this.setState({
            reason: text
        })
    }

    private _onPasswordChange = (text: string) => {
        this.setState({
            password: text
        })
    }

    get disabled() {
        const {
            reason,
            password
        } = this.state;

        if(this.isThirdPartyUser) {
            return !reason;
        }
        return !password || !reason;
    }

    private _onSubmit = async () => {
        const {
            reason,
            password
        } = this.state;
        const _para = {
            password: password,
            leavingReason: reason
        }
        Loading.show();
        try {
            await this.userActions[
                userTypes.userDelete
            ](_para);
            Tip.success({
                message: `Delete Account Successful.`
            })
        }
        catch (e) {
            Tip.warm({
                message: e.message
            })
        }
        Loading.close()
    }

    render() {
        const {
            reason,
            password
        } = this.state;
        return (
            <Layout title="Remove Account" fixed={true}>
                <View style={styles.container}>
                    <TextInput
                        value={reason}
                        multiline={true}
                        style={styles.textArea}
                        placeholderTextColor="#999"
                        onChangeText={this._onReasonChange}
                        placeholder="Please give us the reasons and suggestions for leaving."
                    />
                    {!this.isThirdPartyUser && (
                        <Input
                            value={password}
                            type="password"
                            placeholder="Your Password"
                            onChange={this._onPasswordChange}
                        />
                    )}
                    <Button
                        title="Remove Account"
                        style={styles.submit}
                        disabled={this.disabled}
                        onPress={this._onSubmit}
                    />
                </View>
            </Layout>
        )
    }
}

export default DeleteAccount;

const styles = StyleSheet.create({
    container: {
        paddingVertical: 16
    },
    textArea: {
        padding: 16,
        height: 168,
        fontSize: 16,
        color: `#333`,
        borderRadius: 4,
        backgroundColor: `#fff`,
        textAlignVertical: 'top'
    },
    password: {
        height: 56,
        fontSize: 16,
        color: `#333`,
        marginTop: 24,
        borderRadius: 4,
        paddingHorizontal: 16,
        backgroundColor: `#000`
    },
    submit: {
        marginTop: 64
    }
}) as any;